<template>
	<view class="page">
		<view class="topBox">
			<view class="icon" @click="goBack()">
				<u-icon name="arrow-left" color="#000" size="40"></u-icon>
			</view>
			<view class="text">
				<view class="title">
					注册
				</view>
			</view>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm" >
					<u-form-item :border-bottom="false" prop="phone">
						<view class="inputRow">
							<image src="../../static/images/prefile/userIcon.png" mode=""></image>
							<u-input  :custom-style="customStyle" placeholder="请输入手机号" v-model="form.phone" />
						</view>
					</u-form-item>
					
				<!-- 	<u-form-item :border-bottom="false" prop="validationCode">
						<view class="inputRow">
							<image src="../../static/images/other/item2.png" mode=""></image>
							<u-input  :custom-style="codeCustomStyle" placeholder="请输入验证码" v-model="form.validationCode" />
							<text class="activeText">获取验证码</text>
						</view>
					</u-form-item> -->
					
					<u-form-item  :border-bottom="false"  prop="pwd">
						<view class="inputRow">
							<image  src="../../static/images/prefile/pwdIcon.png" mode=""></image>
							<u-input :custom-style="customStyle" placeholder="请输入密码" type="password" v-model="form.pwd" password-icon />
						</view>
					</u-form-item>
					
					<u-form-item  :border-bottom="false"  prop="againPwd">
						<view class="inputRow">
							<image  src="../../static/images/prefile/pwdIcon.png" mode=""></image>
							<u-input :custom-style="customStyle" placeholder="请再次确认密码" type="password" v-model="form.againPwd" password-icon />
						</view>
					</u-form-item>
					<u-form-item  :border-bottom="false">
						<view class="inputRow">
							<image  src="../../static/images/other/item3.png" mode=""></image>
							<u-input :custom-style="customStyle" placeholder="请输入推荐码（选填）" v-model="form.source_member" password-icon />
						</view>
					</u-form-item>
			</u-form>
		</view>
		<view class="login-btn" @click="submit">
			立即注册
		</view>
		<view class="loginTips">
			注册表示您已阅读并同意 <text class="activeText">《隐私政策》</text>和 <text class="activeText">《服务协议》</text>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		onLoad({source_member}) {
			if(source_member){
				this.form.source_member = source_member
			}
		},
		data() {
			return {
				form:{
					phone:'',
					pwd: '',
					againPwd:'',
					validationCode:'',
					source_member: '',
				},
				validationCode: '',
				customStyle:{
					height: '97rpx',
					width : '460rpx',
				},
				codeCustomStyle:{
					height: '97rpx',
					width : '350rpx',
				},
				rules: {
					phone: [
						{ 
							required: true, 
							message: '请输入手机号', 
							trigger: ['change','blur'],
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
						}
					],
					pwd: [
						{
							required: true,
							message: '请输入密码', 
							trigger: ['change','blur'],
						}
					],
					againPwd: [
						{
							required: true,
							message: '请再次确认密码', 
							trigger: ['change','blur'],
						}
					],
				}
			};
		},
		methods:{
			submit(){
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(this.form.pwd != this.form.againPwd){
							return uni.showToast({
										title: '两次密码须一致',
										duration: 3000,
										icon: 'none'
									});
						}
						this.myHttp({
							url: '/api/register/username',
							data:{
								username : this.form.phone,
								password : this.form.pwd,
								source_member: this.form.source_member,
							}
						}).then(res=>{
							if(res.code == 0){
								uni.showToast({
									title: '注册成功',
									duration: 3000,
								});
								setTimeout(()=>{
									that.goPage('/pages/login/login')
								},1500)
							}
						})
						
					} else {
						
					}
				});
			}
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		},
		components:{
			
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	font-family: PingFang SC;
	width: 100%;
	@include flexCol;
	align-items: center;
	.topBox{
		height: 300rpx;
		padding-top: 100rpx;
		display: flex;
		width: 100%;
		.icon{
			width: 100rpx;
			display: flex;
			align-items: flex-start;
			justify-content: center;
		}
		.text{
			height: 100%;
			display: flex;
			align-items: flex-end;
			.title{
				font-size: 65rpx;
				font-weight: bold;
				color: #1E1C1C;
				margin-bottom: 28rpx;
			}
		}
	}
	
	.form{		
		width: 650rpx;
		.inputRow{
			display: flex;
			align-items: center;
			width: 650rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			padding-right: 20rpx;
			image{
				width: 33rpx;
				height: 37rpx;
				margin: 0 33rpx;
			}
		}
		.fromTips{
			color: #9E9B9B;
			font-size: 26rpx;
			margin-top: 33rpx;
		}
	}
	.login-btn{
		width: 650rpx;
		height: 97rpx;
		background: $themeColor;
		border-radius: 20rpx;
		color: #fff;
		@include flexCenter;
		margin: 50rpx 0 34rpx;
	}
	.loginTips{
		font-size: 22rpx;
		color: #8D8D8D;
	}
	.activeText{
		color: $themeColor;
	}
	
}
</style>
